<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                Chart & Data Visualization
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Line Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.lineChart.data"
                                          chartist-chart-options="vm.lineChart.config"
                                          chartist-chart-type="Line"></chartist>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Bi-Polar Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.biPolarChart.data"
                                          chartist-chart-options="vm.biPolarChart.config"
                                          chartist-chart-type="Line"></chartist>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Bar Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.barChart.data"
                                          chartist-chart-options="vm.barChart.config"
                                          chartist-chart-type="Bar"></chartist>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Stack Bar Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.stackBarChart.data"
                                          chartist-chart-options="vm.stackBarChart.config"
                                          chartist-chart-type="Bar"></chartist>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Pie Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.pieChart.data"
                                          chartist-chart-options="vm.pieChart.config"
                                          chartist-chart-type="Pie"></chartist>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                        <div class="section">
                            <div class="section-title">Donut Chart</div>
                            <div class="section-body">
                                <chartist class="ct-chart ct-perfect-fourth" chartist-data="vm.donutChart.data"
                                          chartist-chart-options="vm.donutChart.config"
                                          chartist-chart-type="Pie"></chartist>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="card card-banner card-green">
            <div class="card-header">
                Chart Banner
            </div>
            <div class="card-body no-padding">
                <chartist class="ct-chart ct-chart-sale" chartist-data="vm.saleChart.data"
                          chartist-chart-options="vm.saleChart.config" chartist-chart-type="Line"></chartist>
            </div>
        </div>
    </div>
</div>